<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>医院管理</el-breadcrumb-item>
      <el-breadcrumb-item>医院管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 顶部信息栏 -->
    <el-card>
      <div style="margin-bottom: 10px; font-size: 20px; font-weight: 900">
        {{ detail.title }}【{{ detail.id }}】
        <span style="color: #348a5b">
          {{ detail.auditName }}
        </span>
      </div>
      <el-card>
        <el-descriptions :column="4">
          <el-descriptions-item label="医院类型">
            <span v-if="detail.is_self == 0"> 第三方 </span>
            <span v-if="detail.is_self == 1"> 自营 </span>
          </el-descriptions-item>
          <el-descriptions-item label="所属服务商">
            {{ detail.providerName }}【{{ detail.provider_id }}】
          </el-descriptions-item>
          <el-descriptions-item label="医院电话">
            {{ detail.tel }}
          </el-descriptions-item>
          <el-descriptions-item label="医院地址">
            {{ detail.province }}{{ detail.city }}{{ detail.area
            }}{{ detail.address }}
          </el-descriptions-item>
          <el-descriptions-item label="负责人">
            {{ detail.leading_name }}
          </el-descriptions-item>
          <el-descriptions-item label="负责人电话">
            {{ detail.leading_phone }}
          </el-descriptions-item>
          <el-descriptions-item label="营业时间">
            {{ detail.working_duration_start }} -
            {{ detail.working_duration_end }}
          </el-descriptions-item>
          <el-descriptions-item label="营业项目">
            {{ detail.serviceItemName }}
          </el-descriptions-item>
          <el-descriptions-item label="结算方式">
            <span v-if="detail.clear_type == 1"> 现结 </span>
            <span v-else-if="detail.clear_type == 2"> 月结 </span>
            <span v-else-if="detail.clear_type == 3"> 自助提现 </span>
            <span v-else class="error"> 异常状态 </span>
          </el-descriptions-item>
          <el-descriptions-item label="医院端系统">
            <span v-if="detail.use_system == 1"> 使用 </span>
            <span v-else-if="detail.use_system == 0"> 不使用 </span>
            <span v-else class="error"> 异常状态 </span>
          </el-descriptions-item>
          <el-descriptions-item label="员工人数">
            {{ detail.employee_num }}
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            {{ detail.remark }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <div style="margin-top: 15px">
        <el-row>
          <el-button
            class="theme-background-color"
            @click="
              $router.push({
                path: '/hospital/AddHospital',
                query: { id: detail.id }
              })
            "
          >
            编辑
          </el-button>
          <el-button
            class="theme-background-color"
            v-show="detail.audit_status == 0"
            @click="
              examineHospitalLook = true
              HospitalId = detail.id
            "
          >
            审核
          </el-button>
          <el-button
            class="theme-background-color"
            v-show="detail.audit_status == 1 && detail.status == 0"
            @click="onOffHospital(1)"
          >
            开启
          </el-button>
          <el-button
            v-show="detail.audit_status == 1 && detail.status == 1"
            @click="onOffHospital(0)"
          >
            关闭
          </el-button>
        </el-row>
      </div>
      <!-- 卡片栏 -->
      <el-tabs type="border-card" v-model="activeName" class="main-tabs">
        <el-tab-pane label="订单信息" name="first">
          <!-- 订单信息卡片视图区域 -->
          <el-row :gutter="10">
            <el-col>
              <el-card v-show="bankCardActionShow">
                <div slot="header">
                  <span>银行卡信息</span>
                  <span style="float: right" v-show="detail.bankCard">
                    <el-link
                      style="color: #348a5b"
                      :underline="false"
                      @click="
                        EditBankCardShow = true
                        hospital_id = detail.id
                        card_info = detail.bankCard
                      "
                    >
                      <i class="el-icon-edit-outline"></i>编辑银行卡信息
                    </el-link>
                  </span>
                  <span style="float: right" v-show="!detail.bankCard">
                    <el-link
                      style="color: #348a5b"
                      :underline="false"
                      @click="
                        addBankCardShow = true
                        hospital_id = detail.id
                      "
                    >
                      <i class="el-icon-edit-outline"></i>添加银行卡信息
                    </el-link>
                  </span>
                </div>
                <el-descriptions :column="2">
                  <el-descriptions-item label="开户银行">
                    <span v-if="detail.bankCard">
                      {{ detail.bankCard.name }}
                    </span>
                    <span v-else> - </span>
                  </el-descriptions-item>
                  <el-descriptions-item label="支行信息">
                    <span v-if="detail.bankCard">
                      {{ detail.bankCard.merchant }}
                    </span>
                    <span v-else> - </span>
                  </el-descriptions-item>
                  <el-descriptions-item label="账户名称">
                    <span v-if="detail.bankCard">
                      {{ detail.bankCard.account }}
                    </span>
                    <span v-else> - </span>
                  </el-descriptions-item>
                  <el-descriptions-item label="银行账号">
                    <span v-if="detail.bankCard">
                      {{ detail.bankCard.card_no }}
                    </span>
                    <span v-else> - </span>
                  </el-descriptions-item>
                </el-descriptions>
              </el-card>
              <el-card>
                <div slot="header">
                  <div class="green-reactangle"></div>
                  <span>证件照及医院形象照</span>
                </div>
                <el-row>
                  <el-col :span="6">
                    <span class="imgTitle">营业执照:</span>
                    <div>
                      <el-image
                        style="width: 100px; height: 100px"
                        fit="cover"
                        :src="detail.business_licence"
                        :preview-src-list="[detail.business_licence]"
                        v-show="detail.business_licence != ''"
                      ></el-image>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <span class="imgTitle">动物诊疗许可证:</span>
                    <div>
                      <el-image
                        style="width: 100px; height: 100px"
                        fit="cover"
                        :src="detail.animal_licence"
                        :preview-src-list="[detail.animal_licence]"
                        v-show="detail.animal_licence != ''"
                      ></el-image>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <span class="imgTitle">公共卫生许可证:</span>
                    <div>
                      <el-image
                        style="width: 100px; height: 100px"
                        fit="cover"
                        :src="detail.public_licence"
                        :preview-src-list="[detail.public_licence]"
                        v-show="detail.public_licence != ''"
                      ></el-image>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <span class="imgTitle">门头照:</span>
                    <div>
                      <el-image
                        style="width: 100px; height: 100px"
                        fit="cover"
                        :src="detail.merchant_photo"
                        :preview-src-list="[detail.merchant_photo]"
                        v-show="detail.merchant_photo != ''"
                      ></el-image>
                    </div>
                  </el-col>
                  <el-col :span="18">
                    <span class="imgTitle">内部装修照:</span>
                    <div>
                      <el-image
                        style="width: 100px; height: 100px"
                        fit="cover"
                        v-for="item in detail.inner_photo"
                        :key="item.index"
                        :src="item"
                        :preview-src-list="detail.inner_photo"
                        v-show="detail.inner_photo != ''"
                      ></el-image>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane label="操作记录" name="third">
          <!-- 操作记录卡片视图区域 -->
          <el-row>
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in detail.action_log"
                :key="index"
                :timestamp="item.create_time + '【' + item.operator_name + '】'"
              >
                <span
                  style="
                    font-size: 18px;
                    color: #008000;
                    margin-bottom: 5px;
                    display: inline-block;
                  "
                  >{{ item.operation_name }}</span
                >
                <br />
                <span style="font-size: 14px">{{ item.operation_desc }}</span>
              </el-timeline-item>
            </el-timeline>
          </el-row>
        </el-tab-pane>
      </el-tabs>

      <ExamineHospital
        :examineHospitalLook.sync="examineHospitalLook"
        :hospital_id="this.hospital_id"
      >
      </ExamineHospital>

      <AddBankCard
        :addBankCardShow.sync="addBankCardShow"
        :hospital_id="this.hospital_id"
      >
      </AddBankCard>

      <EditBankCard
        :EditBankCardShow.sync="EditBankCardShow"
        :hospital_id="this.hospital_id"
        :card_info="this.card_info"
      >
      </EditBankCard>
    </el-card>
  </div>
</template>

<script>
import ExamineHospital from './ExamineHospital.vue'
import AddBankCard from './AddBankCard.vue'
import EditBankCard from './EditBankCard.vue'

export default {
  components: {
    ExamineHospital,
    AddBankCard,
    EditBankCard
  },
  data() {
    return {
      // 服务信息-服务凭证图片
      srcList: [],

      detail: [],
      activeName: 'first',

      hospital_id: 0,
      card_info: {},
      // 审核弹窗显示隐藏
      examineHospitalLook: false,
      addBankCardShow: false,
      EditBankCardShow: false,
      bankCardActionShow: true
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    async getDetailData() {
      // 请求数据
      const { data: res } = await this.$http.post(
        '/admin/Hospital/hospitalDetail',
        {
          id: this.$route.query.id
        }
      )
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      res.data.inner_photo = res.data.inner_photo
        ? res.data.inner_photo.split(',')
        : []
      // 返回结果
      this.detail = res.data
      if (res.data.is_self == 1 || res.data.use_system == 0) {
        // 归属服务商为自营或者未使用医院端系统，不展示银行卡
        this.bankCardActionShow = false
      }
      if (res.data.providerName == '宠泰泰入驻' && res.data.use_system == 1) {
        this.bankCardActionShow = true
      }
      this.hospital_id = Number.parseInt(this.$route.query.id)
    },
    async onOffHospital(data) {
      var title = '开启/关闭 医院'
      if (data === 1) {
        var msg = '是否开启该医院'
      } else {
        var msg = '是否关闭该医院'
      }
      // 弹框询问
      const confirmResult = await this.$confirm(msg, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消操作')
      }
      const url = '/admin/Hospital/onOffHospital'
      const { data: res } = await this.$http.post(url, {
        id: this.detail.id,
        status: data
      })
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg)
      }
      this.$message.success(res.meta.msg)
      this.getDetailData()
    }
  }
}
</script>

<style lang="less" scoped>
.el-col:nth-child(odd) .el-card {
  margin: 10px 0;
  height: auto;
}
.el-col:nth-child(even) .el-card {
  margin: 10px 0 20px 0;
  height: 100%;
}
.el-timeline {
  margin-left: -40px;
  width: 100%;
}
.top-div {
  margin: 10px 0px;
  .top-code {
    font-family: '微软雅黑 Bold', '微软雅黑', sans-serif;
    font-weight: 700;
    font-size: 16px;
  }
  .top-status {
    font-family: '微软雅黑 Bold', '微软雅黑', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #009688;
    line-height: normal;
    margin-left: 30px;
  }
}
/deep/ .el-descriptions-item__label {
  color: #999;
}
.main-tabs {
  margin-top: 10px;
}
.green-reactangle {
  width: 1px;
  height: 10px;
  border: 1px solid #2ba79c;
  background-color: #2ba79c;
  display: inline-block;
  margin-right: 5px;
}
.error {
  color: red;
}
.imgDiv {
  width: 200px;
  height: 150px;
  margin-right: 5px;
  display: inline-block;
}
.imgTitle {
  margin-bottom: 10px;
  display: block;
}
</style>
